import React, { createElement, FC } from 'react';
import { Checkbox, Space, Tag } from 'antd';
import { BaseWrapper } from '../base';
import { getColor } from './utils';
import { useFormContainerSelector } from '../../form-container';
import { generatorClass } from '../../utils';
import './checkboxGroup.less';
import classNames from 'classnames';

export interface FieldCheckboxGroupProps {
  max: string;
}

export const FieldCheckboxGroup: FC<FieldCheckboxGroupProps> = (props) => {
  const className = classNames(generatorClass('filed-checkbox-group'));
  const { columnConfig, value, onChange } = props;
  const [readonly] = useFormContainerSelector((s) => [s.readonly]);

  let direction = 'horizontal';
  if (columnConfig) {
    direction = columnConfig.direction === 'horizontal' ? 'horizontal' : 'vertical';
  }

  return (
    <BaseWrapper {...props}>
      <Checkbox.Group
        className={className}
        disabled={readonly || columnConfig?.status === '2'}
        value={value || columnConfig?.defaultValue}
        onChange={onChange}
      >
        <Space direction={direction}>
          {columnConfig?.options?.map((item) => (
            <Checkbox value={item.value} key={item.value}>
              {columnConfig.hasColor ? (
                <Tag color={getColor(item.color!)}>{item.label}</Tag>
              ) : (
                item.label
              )}
            </Checkbox>
          ))}
        </Space>
      </Checkbox.Group>
    </BaseWrapper>
  );
};
